<template>
 <div class='article-container'>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>活动管理</el-breadcrumb-item>
        </el-breadcrumb> -->
        <Breadcrumb>活动管理</Breadcrumb>
      </div>
      <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="状态">
        <el-radio-group v-model="form.status">
          <el-radio :label="null">全部</el-radio>
          <el-radio :label="0">草稿</el-radio>
          <el-radio :label="1">待审核</el-radio>
          <el-radio :label="2">审核通过</el-radio>
          <el-radio :label="3">审核失败</el-radio>
          <el-radio :label="4">已删除</el-radio>
        </el-radio-group>
      </el-form-item>
      <channel v-model="form.channelId"/>
      <!-- <el-form-item label="频道">
        <el-select v-model="form.region" placeholder="请选择频道">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="日期">
          <el-date-picker
          type="datetimerange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          v-model="form.date"
          value-format="yyyy-MM-dd"
          >
          </el-date-picker>
      </el-form-item>
    <el-form-item>
    <el-button type="primary" @click="onSubmit" :loading="isLoading">查询</el-button>
  </el-form-item>
</el-form>
</el-card>

<el-card class="box-card" style="margin-top:10px">
    <div slot="header" class="clearfix">
        根据筛选条件查询到{{total_count}}条数据，当前是第{{curPage}}页
    </div>
   <el-table
    :data="articles"
    style="width: 100%">
    <el-table-column label="封面">
      <template slot-scope="scope">
        <el-image
        style="width:150px;height:100px"
        :src="scope.row.cover.images[0]"
        lazy
        >
        <div slot="placeholder" class="image-slot">
          加载中<span class='dot'>...</span>
        </div>
        </el-image>
        <!-- <span>{{ scope.row.cover.images[0] }}</span> -->
      </template>
    </el-table-column>
    <el-table-column
      prop="title"
      label="标题">
    </el-table-column>
    <el-table-column
      label="状态">
      <template slot-scope="scope">
        <!-- {{scope.row.status}} -->
        <el-tag v-if="scope.row.status===0" >草稿</el-tag>
        <el-tag v-if="scope.row.status===1" type="info">待审核</el-tag>
        <el-tag v-if="scope.row.status===2" type="success">审核通过</el-tag>
        <el-tag v-if="scope.row.status===3" type="warning">审核失败</el-tag>
        <el-tag v-if="scope.row.status===4" type="dangers">已删除</el-tag>
      </template>
    </el-table-column>
    <el-table-column
      prop="pubdate"
      label="发布时间">
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button type="primary" icon="el-icon-edit" circle @click="hEdit(scope.$index, scope.row)"></el-button>
        <el-button type="danger" icon="el-icon-delete" circle @click="hDelete(scope.$index, scope.row)"></el-button>
      </template>
    </el-table-column>
    </el-table>
    <!-- 分页 -->
     <el-pagination
    v-show="total_count>10"
    :disabled="isLoading"
    style="margin-top:10px"
    background
    layout="prev, pager, next"
    @current-change="hCurrentchange"
    :total="total_count">
    </el-pagination>
</el-card>
 </div>
</template>
<script>
import Channel from '@/components/channel.vue'
// import Breadcrumb from '@/components/breadcrumb.vue'
export default {
  name: 'Article',
  components: {
    Channel
    // Breadcrumb
  },
  data () {
    return {
      form: {
        name: '',
        region: '',
        date: '',
        status: null,
        channelId: null
      },
      isLoading: false,
      articles: [],
      total_count: 0, // 代表当前的总条数
      curPage: 1 // 当前页码值为1
    }
  },
  methods: {
    // 通过请求接口获取文章列表
    async loadArticles () {
      // 组装查询条件
      // 1.日期
      let beginPubdate = null
      let endPubdate = null
      // 2.把选中的参数传过来
      if (this.form.date) {
        beginPubdate = this.form.date[0]
        endPubdate = this.form.date[1]
      }
      const queryObj = {
        page: this.curPage,
        status: this.form.status,
        begin_pubdate: beginPubdate,
        end_pubdate: endPubdate,
        channel_id: this.form.channelId
      }
      this.isLoading = true
      const result = await this.$http({
        method: 'GET',
        url: '/mp/v1_0/articles',
        params: queryObj
      })
      console.log(result)
      this.articles = result.data.data.results
      this.total_count = result.data.data.total_count
      console.log(this.total_count)
      this.isLoading = false
    },
    onSubmit () {
      this.loadArticles()
      // console.log('submit!')
    },
    hEdit (index, row) {
      // 路由跳转到编辑页，并传入id号
      const id = row.id.toString()
      // 路由跳转
      this.$router.push('/editArticle/' + id)
    },
    hDelete (index, row) {
      this.$confirm('确定删除吗？', '提示', {
        confirmButtonText: '确定',
        canceButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 获取数据id
        // console.log(row)
        const id = row.id.toString()
        console.log('当前id是', id)
        // 调接口删除数据
        try {
          const result = await this.$http({
            method: 'DELETE',
            url: '/mp/v1_0/articles/' + id
          })
          console.log(result)
          // 重新获取一下页面
          this.loadArticles()
        } catch (err) {
          this.$message.error('删除失败')
        }
      }).catch(() => {
        // 用户取消了
      })
    },
    hCurrentchange (curPage) {
      // alert(curPage)
      // 更新页码
      this.curPage = curPage
      // 重发请求
      this.loadArticles()
    }
  },
  created () {
    this.loadArticles()
  }
}
</script>
<style lang="less">

</style>
